<template>
  <div class="book-detail-wrap">
    <component-back :title="title"></component-back>
    <component-scroll class="scroll"
                      ref="scroll">
      <div class="content">
        <div class="img-wrap"
             aspectratio
             w-750-600>
          <img :src="newDetail.product_img"
               alt=""
               aspectratio-content>
        </div>
        <div class="item-title">{{newDetail.product_name}}</div>
        <div class="price">￥{{newDetail.sales_price}}</div>
        <div class="original-price">￥{{newDetail.market_price}}</div>
        <div class="space"
             border-top-bottom-1px></div>
        <div class="procuct">
          <h3 class="product-detail">商品详情</h3>
          <div class="product-content"
               v-html="newDetail.content"></div>
        </div>
        <component-footer :info="footerInfo"></component-footer>
      </div>
    </component-scroll>
    <div class="buy-button"
         v-show="!model"
         @click="handleBuy">立即购买</div>
    <div class="buy-model"
         v-show="model">
      <div class="bottom-content">
        <div class="title">
          <div class="address">填写收货信息</div>
          <div class="close"
               @click.stop="handleBuy">关闭</div>
        </div>
        <ul class="input-content">
          <li class="input-item phone">
            <van-field label="手机号："
                       v-model="phone"
                       placeholder="请输入手机号"
                       :error-message="phoneErrMsg" />
          </li>
          <li class="input-item textarea">
            <div class="address-title">地址</div>
            <van-field v-model="message"
                       type="textarea"
                       placeholder="请填写收货地址"
                       rows="3"
                       autosize
                       :error-message="addressErrMsg" />
          </li>
        </ul>
        <div class="submit">
          <div class="sub-btn"
               @click="handleSubmit">提交</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ComponentBack from 'common/back'
import ComponentScroll from 'common/scroll'
import ComponentFooter from 'common/footer'
import base from '@/api/base'
import {
  Toast
} from 'vant'
export default {
  name: 'BookDetail',
  components: {
    ComponentBack,
    ComponentScroll,
    ComponentFooter
  },
  data () {
    return {
      title: '优惠详情',
      footerInfo: {}, // 底部信息
      detail: {}, // 详情信息
      model: false, // 模态框
      phone: '', // 电话内容
      phoneErrMsg: '', // 电话错误信息
      message: '', // 地址内容
      addressErrMsg: '' // 地址错误信息
    }
  },
  computed: {
    newDetail () {
      return Object.assign({}, this.detail, {
        sales_price: this.detail.price,
        market_price: this.detail.market_price
      })
    }
  },
  methods: {
    // 获取底部信息
    getfootInfo () {
      this.$api.buyDetail.getSwiper()
        .then(this.getfootInfoSucc)
    },
    getfootInfoSucc (res) {
      const CODE_OK = this.$api.CODE_OK
      res = res.data
      if (res.code === CODE_OK && res.data) {
        const data = res.data
        this.footerInfo = data.footInfo
      }
    },
    // 获取详情
    getDetailInfo () {
      const id = this.$route.params.id
      this.$api.buyDetail.getDetail({ id })
        .then(this.getDetailSucc)
    },
    getDetailSucc (res) {
      const CODE_OK = this.$api.CODE_OK
      const LOGIN_CODE = this.$api.LOGIN_CODE
      res = res.data
      if (res.code === CODE_OK && res.data) {
        const data = res.data
        this.detail = data.detail
      } else if (res.code === LOGIN_CODE) {
        this.$reLogin()
      }
    },
    // 发送数据
    getPost () {
      const address = this.message
      const phone = this.phone
      const id = this.$route.params.id
      this.$api.buyDetail.getPost({ address, phone, id })
        .then(this.getPostSucc)
    },
    getPostSucc (res) {
      const CODE_OK = this.$api.CODE_OK
      res = res.data
      if (res.code === CODE_OK && res.msg) {
        const msg = res.msg
        const data = res.data
        const order = data.order_no
        Toast({
          message: msg,
          duration: 1000,
          forbidClick: true
        })
        this.handleBuy()
        setTimeout(() => {
          const url = `${base.pro}/wap/payment-${order}.html`
          window.location.href = url
        }, 1500)
      }
    },
    // 处理价钱
    handleMoney (price) {
      return parseInt(price)
    },
    // 获取地址
    getAddress () {
      this.$api.buyDetail.getAddress()
        .then(this.getAddressSucc)
    },
    getAddressSucc (res) {
      const CODE_OK = this.$api.CODE_OK
      const LOGIN_CODE = this.$api.LOGIN_CODE
      res = res.data
      if (res.code === CODE_OK && res.msg) {
        const data = res.data
        this.message = data.addr
        this.phone = data.mobile
      } else if (res.code === LOGIN_CODE) {
        this.$reLogin()
      }
    },
    handleBuy () {
      this.model = !this.model
      this.addressErrMsg = ''
      this.phoneErrMsg = ''
    },
    // 检测函数
    handleCheck () {
      const address = this.message
      const phone = this.phone
      const REG = /^1(3|4|5|7|8)\d{9}$/
      let flag = !(address === '')
      if (flag === false) {
        this.addressErrMsg = '地址不能为空'
        return false
      } else if (REG.test(phone) === false) {
        this.phoneErrMsg = '电话号码格式错误'
        this.addressErrMsg = ''
        return false
      } else {
        this.addressErrMsg = ''
        this.phoneErrMsg = ''
        return true
      }
    },
    // 提交
    handleSubmit () {
      const isPost = this.handleCheck()
      if (isPost) {
        this.getPost()
        this.handleBuy()
      } else {
        return false
      }
    }
  },
  activated () {
    this.getDetailInfo()
    this.getfootInfo()
    this.getAddress()
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.book-detail-wrap >>>.van-cell
  padding-left 24px
  padding-right 24px
  padding-top 0
  padding-bottom 0
  height 140px

.book-detail-wrap >>> .van-field .van-cell__title
  line-height 109px
  font-size $shop_name
  font-weight 500
  color $common_fz_color
  display flex
  justify-content space-between

.book-detail-wrap >>> .van-field .van-cell__title span
  display flex
  height 109px
  align-items center
  white-space nowrap

.book-detail-wrap >>> .van-field__error-message
  padding-left 40px
  box-sizing border-box

.book-detail-wrap >>> .van-field__body
  height 109px

.book-detail-wrap>>>.van-field__control
  height 109px
  display flex
  align-items center
  font-size $shop_name
  font-weight 500
  color $common_fz_color
  flex 1
  margin-left 40px

.book-detail-wrap .textarea >>> .van-field__control
  padding-top 20px
  box-sizing border-box
  line-height 45px
  margin-left 0

.book-detail-wrap .textarea >>> .van-field__error-message
  padding-left 0
  box-sizing border-box

.book-detail-wrap
  touch-action none
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  overflow hidden

.scroll
  top 88px
  bottom 88px
  background-color $common_bgc

  .img-wrap
    margin-bottom 7px
    border-bottom 2px solid #e6e6e6

  .item-title, .product-detail
    width 100%
    padding()
    ellipsis()
    font-size $back_fz
    font-weight 500
    color $common_fz_color
    line-height 82px

  .price
    width 100%
    padding()
    ellipsis()
    font-size $address
    font-weight bold
    color $price
    line-height 42px

  .original-price
    width 100%
    padding()
    ellipsis()
    font-size $address
    font-weight 400
    color $original_price
    line-height 42px
    text-decoration line-through
    margin-bottom 32px

  .space
    width 750px
    height 20px
    background $space

  .product-detail
    font-weight bold
    font-size $address

  .product-content
    width 100%
    padding-bottom 20px
    box-sizing border-box
    min-height 500px
    padding()

.buy-button
  position fixed
  bottom 0
  left 0
  width 750px
  height 88px
  background $service
  font-size $back_fz
  font-weight bold
  color $common_bgc
  text-shadow 0px 2px 2px rgba(5, 5, 5, 0.24)
  line-height 88px
  text-align center

.buy-model
  position fixed
  z-index 10
  top 0
  left 0
  bottom 0
  right 0
  background rgba(5, 5, 5, 0.5)

  .bottom-content
    position absolute
    bottom 0
    left 0
    width 100%

  .title
    width 100%
    height 79px
    background $space
    border-top-left-radius 24px
    border-top-right-radius 24px
    display flex
    padding()
    justify-content space-between
    align-items center

    .address
      font-size $address
      font-weight bold
      color $location

    .close
      font-size $address
      font-weight bold
      color $original_price

.input-content
  width 100%

  .input-item
    width 100%
    border-bottom 1px solid #e6e6e6

.address-title
  padding()
  line-height 60px
  font-size $common_fz
  font-weight 500
  color $original_price
  background-color #fff

.submit
  padding-left 30px
  padding-right 30px
  padding-top 40px
  padding-bottom 40px
  box-sizing border-box
  background-color $common_bgc

.sub-btn
  text-align center
  line-height 88px
  width 100%
  height 88px
  background $tab_active
  border-radius 20px
  font-size $back_fz
  font-weight bold
  color $common_bgc
  text-shadow 0px 2px 2px rgba(5, 5, 5, 0.24)
</style>
